<!--
 * @description  :仓库库存物品详情
 * @descriptionDetail:仓库库存物品详情
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-10-09 22:21:21
-->
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<u-icon color="#FFF" name="list" size="38" @click="isOpen = true"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<u-popup mode="right" height="100%" width="80%" v-model="isOpen">
			<view class="cearch_title">
				查询条件
			</view>
			<!-- 搜索列表 -->
			<view class="title-content">
				<u-form class="search-pop" label-position="top" label-width="auto" :model="searchForm">
					<u-form-item label="物品名称:">
						<u-input v-model="searchForm.goodsName" />
					</u-form-item>
					<u-form-item label="案件编号:">
						<u-input v-model="searchForm.caseCode" />
					</u-form-item>
					<u-form-item label="当事人:">
						<u-input v-model="searchForm.party" />
					</u-form-item>
					<u-form-item label="库位:">
						<u-input v-model="searchForm.psCode" />
					</u-form-item>
					<u-form-item label="所属仓库:">
						<u-input type="select" :select-open="showStoreType" placeholder="请选择" v-model="searchForm.storeName" @click="()=>{
                showStoreType=true
              }" />
					</u-form-item>
					<u-form-item label="性质大类:">
						<u-input type="select" :select-open="showCigarette" placeholder="请选择" v-model="searchForm.propTypeName" @click="()=>{
                showCigarette=true
              }" />
					</u-form-item>
					<view class="submit-btns btn-other-cls" style="margin-left:-30rpx">
						<u-button plain class="del" type="primary" @click="resetClick">
							重置
						</u-button>
						<u-button class="mit" type="primary" @click="searchConfirm">
							确定
						</u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
		<view class="stickys">
			<u-row>
				<u-col span="3">
					<view class="store-content">
						案件数量(起)
					</view>
					<view class="store-main-title">
						{{ bean.caseNum||0 }}
					</view>
				</u-col>
				<u-col span="3">
					<view class="store-content">
						真烟数量(条)
					</view>
					<view class="store-main-title">
						{{ bean.truthQty||0 }}
					</view>
				</u-col>
				<u-col span="3">
					<view class="store-content">
						假烟数量(条)
					</view>
					<view class="store-main-title">
						{{ bean.fakeQty||0 }}
					</view>
				</u-col>
				<u-col span="3">
					<view class="store-content">
						走私烟数量(条)
					</view>
					<view class="store-main-title">
						{{ bean.smuggleQty||0 }}
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="u-page list-content" v-if="tabIndex==0">
			<!-- 明细纬度 上拉加载 -->
			<me-table :i="0" :index="0" :top="105" :load-data="loadData" :init-load="false" ref="mescrollItem0">
				<view slot-scope="d" class="list-item-root">
					<detail-card :detailInfo="d.data"></detail-card>
				</view>
			</me-table>
		</view>
		<u-select :list="storeTypeList" v-model="showStoreType" @confirm="selectStoreConfirm"></u-select>
		<u-select :list="cigaretteProperties" v-model="showCigarette" @confirm="selectCigaretteConfirm"></u-select>
	</view>
</template>

<script>
	import meTable from '@/components/me-table.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import DetailCard from './components/DetailCard.vue';
	import storeService from '@/service/store/store.service.js';
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			fabButton,
			DetailCard,
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				isOpen: false,
				tabIndex: 0, // 表示当前活动的tab选项
				showStoreType: false,
				showCigarette: false,
				// 查询表单
				searchForm: {
					dimension: 1,
					storeId: "", // 所属仓库
					storeName: '',
					goodsName: "",
					caseCode: "",
					party: "",
					propType: "", // 卷烟性质
					propTypeName: '',
					psCode: "",
					viewType: "all",
					detail: "",
				},
				// 所属仓库类型选择
				storeTypeList: [],
				bean: {}, // 仓库库存统计数据
				// 卷烟性质类型选择
				cigaretteProperties: [{
						value: '',
						label: '全部',
					},
					{
						value: '5701',
						label: '真烟',
					},
					{
						value: '5702',
						label: '假烟',
					},
					{
						value: '5703',
						label: '走私烟',
					},
				],
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
			};
		},
		onLoad(opt) {
			this.searchForm.caseCode = opt.caseCode;
			this.searchForm.propType = opt.propType;
			this.searchForm.storeId = null;
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {
			this.setRightBtns();
			this.getStoreSelctList();
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("筛选", () => {
					this.isOpen = true;
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.isOpen = true;
				}
			},
			// 获取所属仓库列表
			getStoreSelctList() {
				let parmas = {
					paras: {
						psr: "",
						storeId: "",
						type: 3,
					},
				}
				return new Promise((resolve, reject) => {
					storeService.getStoreLst(parmas).then((res) => {
						this.storeTypeList = res.data.map((item) => {
							return {
								value: item.storeId,
								label: item.storeName,
							}
						})
					})
				})
			},
			loadData(page) {
				let self = this;
				let parmas = {
					page: page.num,
					limit: page.size,
					paras: {
						...this.searchForm,
					},
				}
				return new Promise((resolve, reject) => {
					storeService
						.getStoreGoodsList(parmas)
						.then((res) => {
							this.bean = res.bean;
							resolve({
								count: res.count,
								data: res.data,
							});
						})
				});
			},
			// 所属仓库筛选确认
			selectStoreConfirm(e) {
				this.searchForm.storeId = '';
				e.map((val, index) => {
					this.searchForm.storeName = val.label;
					this.searchForm.storeId = val.value;
				});
			},

			// 筛选确认
			searchConfirm() {
				this.$refs["mescrollItem0"].refresh();
				this.isOpen = false;
			},
			// 筛选重置按钮
			resetClick() {
				this.searchForm = {};
				this.searchForm.dimension = this.tabIndex + 1;
				this.searchForm.viewType = "mine";
			},
			// 性质大类筛选确认
			selectCigaretteConfirm(e) {
				this.searchForm.propType = '';
				e.map((val, index) => {
					this.searchForm.propTypeName = val.label;
					this.searchForm.propType = val.value;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "style/store/common.scss";

	.list-content {
		background-color: #F3F4F5;
		min-height: 100%;
	}

	.list-item-root {
		margin: 10px;
		border-radius: 15px;
		overflow: hidden;
		background-color: #fff;
	}

	.cearch_title {
		background-color: #F3F4F5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.page {
		padding: 0;
	}

	.title-content {
		width: 98%;
		margin: auto;
		padding-top: 76rpx;

		.query-btn {
			position: fixed;
			width: 95%;
			bottom: var(--window-bottom, 0);
		}
	}

	.stickys {
		/* #ifndef H5-ONLY  */
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		background-color: #FFFFFF;
		/* #endif */
		/* #ifdef H5-ONLY  */
		position: fixed;
		top: 44px;
		width: 100%;
		z-index: 999;
		background-color: #FFFFFF;
		/* #endif */
	}

	.content {
		background-color: #FFF;
	}

	/deep/ .u-tabbar__content__item__text {
		font-size: 15px;
	}

	.search-pop {
		padding: 5rpx 30rpx;

		.btn-group {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
		}
	}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: 15 rpx;
		color: #fff;
	}
</style>
